<template>
<div>

  <div id="sellercenter" >
  	<flexbox orient="vertical" class="bgred white">
		<flexbox-item class="userinfo ">
			<img class="headerimg fl" :src="userdata.headimgurl">
			<div class="h4 fl mt15">
				{{userdata.nickname}} / {{userdata.level_name}} / {{userdata.fx_levelname}} / 
			</div>
			<div v-if="userdata.fx_level == 1 || userdata.fx_level == 999" class="fr mt15 mr15" @click="invitationCode">
				<img src="./img/qrcode.png" width="20" height="20" >
			</div>
		</flexbox-item>

		<flexbox-item class="text-center pb20">
			<flexbox>
				<flexbox-item class="text-center">
					<div class="h5">账户余额</div>
					<div class="h2 ">
					 ¥ <span class="balance">{{sellerminedata.price}}</span>
					</div>
				</flexbox-item>
				<flexbox-item class="text-center">
					<div class="h5">今日收益</div>
					<div class="h2 ">
					 ¥ <span class="balance">{{sellerminedata.todayprice}}</span>
					</div>
				</flexbox-item>
			</flexbox>
		</flexbox-item>

		<!-- <flexbox-item>
			<flexbox class="bgred pb20 white">
		    	<flexbox-item class="text-center "  >
		    		<div class="h5 mt20">今日收益</div>
		    		<div class="h5">¥ <span class="h1">{{sellerminedata.todayprice}}</span></div>
		    	</flexbox-item>
		    	<flexbox-item class="text-center " @click.native="preincome">
		    		<div class="h5 mt20">预计收益</div>
		    		<div class="h5">¥ <span class="h1">{{sellerminedata.estimateprice}}</span></div>
		    	</flexbox-item>
		    </flexbox>
		</flexbox-item> -->
    </flexbox>

    <flexbox >
      <flexbox-item >
      	<yd-grids-group class="qrcode" :rows="3">
      		<!-- <yd-grids-item :link="{ 'name' : 'goods', 'query' : {'company_code' : this.company_code,}}">
	            <img slot="icon" src="./img/icon/goods.png">
	            <span slot="text" class="h4">收益</span>
	            <div slot="text" class="h5 hui">今日收益¥ {{sellerminedata.todayprice}}</div>
	        </yd-grids-item> -->

      		<yd-grids-item :link="{ 'name' : 'account', 'query' : {'company_code' : this.company_code,}}" >
	            <img slot="icon" src="./img/icon/account.png" >
	            <span slot="text" class="h4">账户</span>
	            <div slot="text" class="h5 hui">总收益 ¥{{sellerminedata.incomeprice}}</div>
	        </yd-grids-item>
	        <yd-grids-item :link="{ 'name' : 'cash', 'query' : {'company_code' : this.company_code,'max_money' : this.sellerminedata.price,}}">
	            <img slot="icon" src="./img/icon/seller.png">
	            <span slot="text" class="h4">
	            	提现	
	            </span>
	            <div slot="text" class="h5 hui">累计提现 ¥{{sellerminedata.outprice}} </div>
	        </yd-grids-item>
	        <yd-grids-item :link="{ 'name' : 'goods', 'query' : {'company_code' : this.company_code,}}">
	            <img slot="icon" src="./img/icon/goods.png">
	            <span slot="text" class="h4">货架</span>
	            <div slot="text" class="h5 hui">共 {{sellerminedata.salecount}} 件产品</div>
	        </yd-grids-item>
	    </yd-grids-group>
      </flexbox-item>
    </flexbox>

    <!-- <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item @click.native="invitation" arrow>
		            <span slot="left">邀请函</span>
		            <span slot="right">点击生成</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>   -->

    <!-- <flexbox class="bgwhite pb20">
    	<flexbox-item class="text-center " @click.native="invitation">
    		<div class="h4 mt20">生成邀请函</div>
    	</flexbox-item>
    </flexbox> -->

    <flexbox class="mt20">
    	<flexbox-item >
    		<yd-cell-group>
    			<yd-cell-item v-if="userdata.fx_level == 1 || userdata.fx_level == 999"
    			 @click.native="clickinvitation" arrow>
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/goods.png" > -->
		            <span slot="left">邀请函</span>
		            <span slot="right">点击生成</span>
		        </yd-cell-item>
		        <yd-cell-item v-if="userdata.fx_level == 1 || userdata.fx_level == 999"
		         arrow @click.native="seller(1)">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/seller.png" > -->
		            <span slot="left">下级分销商</span>
		            <span slot="right">{{sellerminedata.mydistributioncount}}</span>
		        </yd-cell-item>
		        <yd-cell-item v-if="userdata.fx_level == 1 || userdata.fx_level == 999"
		         arrow @click.native="seller(2)">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/seller.png" > -->
		            <span slot="left">待审核分销商</span>
		            <span slot="right">
		            	<yd-badge v-if="sellerminedata.applycount != 0" type="danger">{{sellerminedata.applycount}}</yd-badge>
		            </span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="fans">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/fans.png" > -->
		            <span slot="left">粉丝</span>
		            <span slot="right">{{sellerminedata.fancount}}</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  


    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <!-- <yd-cell-item arrow @click.native="income">
		            <span slot="left">已经分佣的订单</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="income">
		            <span slot="left">进行中的订单</span>
		        </yd-cell-item> -->
		        <yd-cell-item arrow @click.native="fxordersearch">
		            <span slot="left">分销查询</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="statistics">
		            <span slot="left">销售统计</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  


    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item arrow @click.native="helpseller">
		            <span slot="left">群盟教程</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  

    <!-- <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item arrow @click.native="seat">
		            <span slot="left">在线选座（测试）</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="bankcard">
		            <span slot="left">银行卡（测试）</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="address">
		            <span slot="left">地址（测试）</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="touch">
		            <span slot="left">滑动（测试）</span>
		        </yd-cell-item>

		        <yd-cell-item arrow @click.native="poster">
		            <span slot="left">海报（测试）</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>

    </flexbox>  -->

    <div style="height:70px;width:100%;"></div>

  </div>


  	<div v-if="invitationCodeShow">
	<yd-popup v-model="invitationCodeShow" 
	position="center" :masker-opacity=".8" width="280px" 
	>
		<div class="bgwhite text-center pt10" style="width:280px; height:470px;">
		  	<invitation :options="{
				'name' : invitationName,
				'data' : shareLink,
				'img' : wximg,
			}"></invitation>
		  	<div class="h2 hui mt15">长按图片保存邀请函</div>
		</div>
		
	</yd-popup>
	</div>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import wx from '../../util/weixin';
import QrcodeVue from 'qrcode.vue';
import { cutQueryString } from '../../util/util'
import invitation from '../util/invitation'
import poster from '../util/poster'

export default {
	name: 'Mine',

	data () {
		return {
			msg: '我的。。。。。。',

			invitationCodeShow : false,

			invitationName : '',

		}
	},

	computed : {
		...mapGetters([
			'company_code',
			'userdata',
			'sellerminedata',
		]),

		shareLink () {
			//如果链接里有u,则去掉
			var link = cutQueryString('u');
			//把页面换掉
			link = cutQueryString('mine', 'page', link, 'applyseller');
			//var link = cutQueryString('company_code');
			link += '&u=' + this.userdata.user_base;
			console.log(link);
			return link;
		},


		wximg () {
			return this.userdata.headimgurl.replace('http://thirdwx.qlogo.cn', "");
		},

	},

	methods : {
		orderlist () {
			console.log('orderlist');
			this.$router.push({ 
				'name': 'orderlist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		seller (what) {
			console.log('分销商');
			console.log(what);

			this.$router.push({ 
				'name': 'sellerlist', 
				'query' : {
					'company_code' : this.company_code,
					'what' : what,
				}
			});
		},

		account () {
			this.$router.push({ 
				'name': 'account', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		goods () {
			console.log('goods');
			this.$router.push({ 
				'name': 'goods', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		fans () {
			this.$router.push({ 
				'name': 'fanslist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},


		clickinvitation () {
			console.log('邀请函');

			this.$dialog.confirm({

				'title' : '自定义邀请函名字',

				'mes' : '<input id="pname" style="height: 1rem;border: none;font-size: .3rem;justify-content: flex-start;-webkit-box-align: center;align-items: center;text-align: left;vertical-align: baseline;border-radius: 0;"   placeholder="请输入邀请函名字">',

				'opts': [
					{
                        txt: '取消',
                        color: false,
                        callback: () => {
                            console.log('取消');
                        }
                    },
                    {
                        txt: '使用微信名',
                        color: false,
                        callback: () => {
                            console.log('用微信名');
                            this._getInvitation(this.userdata.nickname);
                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            console.log('自定义名字');
                            var tt = document.getElementById('pname').value;
					  		
					  		this._getInvitation(tt);
                        }
                    }
                ]
			});
		},

		statistics () {
			console.log('销售统计');
			this.$router.push({ 
				'name': 'statistics', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		income () {
			console.log('income');
			this.$router.push({ 
				'name': 'profitlist', 
				'params': { 
					'what': 'income',
				},
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		preincome () {
			this.$router.push({ 
				'name': 'profitlist', 
				'params': { 
					'what': 'preincome',
				},
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		cash () {
			console.log('提现');

			this.$router.push({ 
				'name': 'cash', 
				'query' : { 
					'company_code' : this.company_code,
					'max_money' : this.sellerminedata.price,
				}
			});
		},

		seat () {
			console.log('选座');
			this.$router.push({ 
				'name': 'seat', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		bankcard () {
			this.$router.push({ 
				'name': 'bankcardlist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		address () {
			this.$router.push({ 
				'name': 'addresslist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		helpseller () {
			this.$router.push({ 
				'name': 'helpseller', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},


		touch () {
			this.$router.push({ 
				'name': 'touch', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		poster () {
			this.$router.push({ 
				'name': 'poster', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		_getposter (para) {
			wx.weixinPoster(this.company_code, para, (res) => {
				this.$dialog.confirm({
					'title' : '预览邀请函?',
					'opts': [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                wx.wexinPreviewImage(res.localId);
                            }
                        }
                    ]
				});
			}, () => {
				console.log('22222');
			});
		},


		_getInvitation (name) {
			this.invitationName = name;
			this.invitationCodeShow = true;
		},

		invitationCode () {

			console.log('invitationCode');
			console.log(this.userdata.nickname);
			this.invitationName = this.userdata.nickname;

			this.invitationCodeShow = true;

		},

		fxordersearch () {
			this.$router.push({ 
				'name': 'fxordersearch', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},
	},

	components : {
		QrcodeVue,
		invitation,
		poster,
	},

	mounted () {

		this.$store.dispatch('getSellerMineData', {
			'company_code' : this.company_code,
		});

	},


}
</script>

<style scoped >


#sellercenter {
	margin-bottom: 60px;
}

.userinfo {
	/*text-align: center;*/
	background-color : #FF5E53; 
	margin-bottom: 20px;
	/*background-color: #5C6F97;*/
	/*background-color: #49607B;*/
}

.userinfo .headerimg {
	border-radius:50%;
	width: 30px;
	height: 30px;
	margin: 10px;
}

.userinfo .name {
	margin-top: 10px;
	/*color: #fff;*/
}

.balance {
	font-size: .7rem;
}

.userinfo .level {
	color: #aaa;
	/*color: #fff;*/
}

.qrcode {

}

/*.qrcode .goods, .qrcode .invitation  {
	width: 50%;
	text-align: center;
	float: left;
}*/

.qrcode img {
	width: 20px;
	height: 20px;
}


</style>
